<template>
  <div class="article-page">
    <div 
    v-for="item in list" 
    :key="item.id" 
    @click="$router.push(`/detail?id=${item.id}`)"
    class="article-item">
      <div class="article-header">
        <img :src="item.creatorAvatar" width="80px" height="80px">
        <div>
          <p class="title" style="font-size: 20px;font-weight: 600;">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }}|{{ item.createdAt }}</p>
        </div>  
      </div>
      <div class="article-body">
        {{ item.content }}
      </div>
      <div class="article-footer">
        <span>点赞{{ item.likeCount }}|浏览{{ item.views }}</span>
      </div>

    </div>
  </div>
</template>


<script>
import axios from 'axios'

export default {
  name: 'ArticleList',
  data(){
    return {
      list: ''
    }
  },
  async created() {
    // { }对返回结果解构，与data.data相当
    const {data} = await axios.get('https://mock.boxuegu.com/mock/3083/articles');
    // console.log(data)
    this.list = data.result.rows;
    // console.log(this.list)
  },
}
</script>

<style scoped>
  *{
    font-size: 18px;
  }
  .article-item{
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
    background-color: rgb(209, 209, 218);
    overflow: hidden;
  }
  .article-header{
    display: flex;
    align-items: center;
    /* height: 20px; */
  }
  .article-body{
    margin-top: 5px;
    height: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .article-footer{
    margin-top: 10px;
  }
</style>